@tailwind base;
@tailwind components;
@tailwind utilities;


/* Mobile First Styles */
@media (max-width: 768px) {
  .sidebar {
    top: 4rem; /* Match navbar height */
    height: calc(100vh - 4rem); /* Account for navbar */
  }
}

@media (max-width: 768px) {
  /* Navbar Mobile Styles */
  .navbar {
    @apply fixed top-0 left-0 right-0 z-50;
    height: 64px;
  }

  /* Sidebar Mobile Styles */
  .sidebar {
    @apply fixed top-0 bottom-0 left-0 z-40;
    width: 80%; /* Sidebar takes 80% of screen width */
    transform: translateX(-100%); /* Hidden by default */
    transition: transform 0.3s ease-in-out;
  }

  .sidebar.open {
    transform: translateX(0); /* Slide in when open */
  }

  /* Mobile Menu Overlay */
  .sidebar-overlay {
    @apply fixed inset-0 z-30 bg-black/50;
  }

  /* Profile Dropdown Adjustment */
  .profile-dropdown {
    @apply right-2;
    min-width: 160px;
  }

  /* Hamburger Menu Icon */
  .mobile-menu-button {
    @apply block;
  }
}

/* Desktop Styles */
@media (min-width: 769px) {
  .sidebar {
    @apply relative translate-x-0;
  }
  
  .mobile-menu-button {
    @apply hidden;
  }
}

/* General Enhancements */
body {
  @apply overflow-x-hidden;
}

/* Smooth Transitions */
.sidebar {
  transition: transform 0.3s ease-in-out;
}

/* Z-index Management */
.navbar {
  z-index: 50;
}

.sidebar {
  z-index: 40;
}

.sidebar-overlay {
  z-index: 30;
}

/* Touch-friendly Elements */
button, .menu-item {
  @apply min-h-[48px];
}

/* Prevent Body Scroll When Sidebar is Open */
body.sidebar-open {
  @apply overflow-hidden;
}
html, body {
  height: 100%;
  overflow: auto;
}
